<template>
  <div
    :class="obj"
    :style="{width:widths}"
    class="query-select"
    @click="selectList">
    <input v-model="defaultName" readonly="readonly">
    <div class="down"/>
    <div v-show="modelShow" class="bg-model" @click="queryTag()">&nbsp;</div>
    <div
      v-show="selectShow"
      :style="selectStyle"
      :class="selectBox"
      class="city-select">
      <div class="select-title"><span>选择区域</span><i @click="cancel">X</i></div>
      <div class="query-tag" @click="queryTag()">
        <div class="tab-box">
          <ul :style="widthTab">
            <li
              v-for="(items,tabIndex) in tabCityName"
              :key="(items,tabIndex)"
              :class="{active:tabCurrentIndex == tabIndex}"
              @click="tabChange(tabIndex)">
              <p >{{ items.name }}</p>
            </li>
          </ul>
        </div>

      </div>
      <div class="select-box">
        <div
          v-for="(items,selectIndex) in selectContent"
          :key="(items,selectIndex)"
          :value="items.code"
          :class="{active:index == selectIndex}"
          class="option"
          @click="optionSelect(selectIndex)">
          <p >{{ items.name }}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import qs from 'qs'
export default {
  props: {
    defaultName: {
      type: String,
      default: ''
    },
    obj: {
      type: String,
      default: ''
    },
    widths: {
      type: String,
      default: '100%'
    },
    tabName: {
      type: Array,
      default: function () {
        return []
      }
    },
    timeType: {
      type: Number,
      default: 1
    },
    selectUrl: {
      type: String,
      default: ''
    },
    selectStyle: {
      type: Object,
      default: function () {
        return {left: 0, width: '100%'}
      }
    }
  },
  data () {
    return {
      selectValue: '',
      selectName: '',
      selectBox: '',
      selectedData: {},
      firstSelectedData: {},
      tabCityName: [],
      selectContent: [],
      selectShow: false,
      modelShow: false,
      index: 0,
      widthTab: {width: '100%'},
      tabCurrentIndex: 0
    }
  },
  mounted () {
    let that = this
    if (that.defaultSelected) {
      that.defaultSelect()
    }
  },
  destroyed () {
    this.tabCityName = []
  },
  methods: {
    // 打开层级选择
    selectList (ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
      let name = ''
      let code = 0
      let areaType = 0
      this.$nextTick(() => {
        this.tabCityName = this.tabName
        this.selectName = this.defaultName
        let tabLen = this.tabName.length
        let tabCityLen = this.tabCityName.length
        this.tabCurrentIndex = tabCityLen - 1
        this.selectedData = this.tabName[tabLen - 1]
        this.widthTab['width'] = (tabCityLen * 2) + 'rem'
        if (this.tabCityName.length > 2) {
          name = this.tabCityName[tabCityLen - 2].name
          code = this.tabCityName[tabCityLen - 2].code
          areaType = this.tabCityName[tabCityLen - 2].type
          this.firstSelectedData = this.tabCityName[tabCityLen - 2]
          this.tabCityName.splice(tabCityLen - 1, 1)
        } else {
          if (tabCityLen === 2) {
            this.firstSelectedData = this.tabCityName[tabCityLen - 2]
          } else {
            this.firstSelectedData = this.tabCityName[tabCityLen - 1]
          }
          name = this.tabCityName[0].name
          code = this.tabCityName[0].code
          areaType = this.tabCityName[0].type
          this.tabCityName.splice(1, 1)
        }
        this.getList(name, code, areaType)
        this.modelShow = true
        this.selectShow = true
      })
    },
    // 取消层级选择
    cancel (ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
      this.modelShow = false
      // this.selectBox = 'close-select'
      this.selectShow = false
    },
    // 确定选择城市
    optionSelect (index, ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
      let that = this
      this.firstSelectedData = this.selectedData = that.selectContent[index]
      if (that.tabCityName.length !== this.tabCurrentIndex + 1) {
        let count = that.tabCityName.length - (this.tabCurrentIndex + 1)
        that.tabCityName.splice(this.tabCurrentIndex + 1, count)
      }
      if (index === 0) {
        that.confirmSelect()
      } else {
        this.tabCurrentIndex = that.tabCityName.length
        that.tabCityName[that.tabCurrentIndex] = this.selectedData
        that.getList(this.selectedData.name, this.selectedData.code, this.selectedData.type)
        this.widthTab['width'] = (that.tabCityName.length * 2) + 'rem'
      }
    },
    // 确定选择关闭城市选择组件
    confirmSelect () {
      this.selectName = this.tabCityName[this.tabCityName.length - 1].name
      this.selectValue = this.tabCityName[this.tabCityName.length - 1].code
      this.$emit('selectData', this.timeType, this.selectName, this.selectValue, this.tabCityName)
      this.modelShow = false
      // this.selectBox = 'close-select'
      this.selectShow = false
    },
    // 请求下级list
    getList (name, code, areaType) {
      let token = sessionStorage.getItem('token')
      let that = this
      this.$api
        .post(that.selectUrl, qs.stringify({
          token: token,
          code: code,
          type: areaType
        }))
        .then(function (res) {
          if (res.status === 200) {
            let resultData = res.data.resultData
            let allData = resultData.orgData.concat(resultData.navData)
            let flag = true
            for (let i = 0; i < allData.length; i++) {
              if (allData[i].name === that.selectedData.name) {
                that.index = i + 1
                flag = false
              }
            }
            if (flag) {
              that.index = 0
            }
            allData.unshift(that.firstSelectedData)
            that.selectContent = allData
          }
        })
    },
    // 导航点击
    tabChange (index, ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
      this.tabCurrentIndex = index

      let code = this.tabCityName[index].code
      let name = this.tabCityName[index].name
      let areaType = this.tabCityName[index].type
      this.firstSelectedData = this.tabCityName[index]
      this.selectedData = this.tabCityName[index + 1]
      this.getList(name, code, areaType)
    },
    queryTag (ev) {
      var oEvent = ev || event
      oEvent.cancelBubble = true
    }
  }
}
</script>
<style lang="scss" scoped>
$f_color : #ffffff;
$bg_color_s : #0E0A2E;
$border-c:#79C4EE;
$bg_color: #3C8ACC;
$f_size:.26rem;
$acitve-color:#FF7F27;
.query-select{
    min-width: .5rem;
    text-align: left;
    position: relative;
    display: inline-block;
    border: .02rem solid $border-c;
    padding:0 .5rem 0 .2rem;
    height:0.5rem;
    line-height: .5rem;
    font-size: $f_size;
    background: $bg_color;
    input{
        width:100%;
        height:.4rem;
        line-height: .4rem;
        border: none;
        background: none;
        color:$f_color;
        font-size: $f_size;
    }
    .bg-model {
      position: fixed;
      top: 0;
      left:0;
      z-index: 999;
      color:$f_color;
      font-size: $f_size;
      background: $bg_color_s;
      opacity: .5;
      width: 100%;
      height: 100%;
    }
    .city-select{
        position: absolute;
        top:.55rem;
        left:0;
        z-index: 1000;
        color:$f_color;
        font-size: $f_size;
        background: $bg_color;
        padding-bottom: .05rem;
        border: .02rem solid rgba(255, 255,255, .35);
        .select-title{
          width: 100%;
          height: .5rem;
          line-height: .5rem;
          position: relative;
          left: 0;
          top: 0;
          text-align: center;
          font-size: $f_size;
          border-bottom: .01rem solid rgba(255, 255,255, .35);
          span {
            display: inline-block;
            height: .5rem;
            line-height: .5rem;
            text-align: center;
            font-size: $f_size;
          }
          i {
              position: absolute;
              right:.05rem;
              top:0;
              margin-right: .06rem;
              font-size: $f_size;
              &.active{
                color:$acitve-color;
              }
            }
        }
        .select-box{
            width: 100%;
            position: relative;
            max-height:5rem;
            min-height:5rem;
            overflow: hidden;
            overflow-y: auto;
            .option{
                border: none;
                background:$bg_color;
                color: $f_color;
                font-size: $f_size;
                padding: .1rem .2rem;
                &.active{
                    background: $bg_color;
                    p:nth-child(1) {
                        color: $acitve-color;
                    }
                    p:nth-child(2) {
                        line-height: 0.4rem;
                        float: right;
                        font-size: $f_size;
                        color: $f_color;
                    }
                }
                p {
                    line-height: 0.4rem;
                    display: inline-block;
                    font-size: $f_size;
                    color: $f_color;
                }
            }
        }
        .query-tag{
            width: 100%;
            height: 0.6rem;
            line-height: 0.6rem;
            background: $bg_color;
            color: $f_color;
            font-size: $f_size;
            border-bottom: .01rem solid rgba(255, 255,255, .35);
            .tab-box{
              float: left;
              width: 85%;
              height: .6rem;
              padding-left: .2rem;
              overflow: hidden;
              overflow-x: auto;
              ul {
                height: .6rem;
                li {
                    float: left;
                    margin-right: .2rem;
                    line-height: .5rem;
                    height: .5rem;
                    min-width: .2rem;
                    font-size: $f_size;
                    border-bottom: .02rem solid transparent;
                    margin: .05rem;

                    &.active{
                        border-bottom: .02rem solid $acitve-color;
                        color: $acitve-color;

                    }
                    p {
                        line-height: 0.4rem;
                        display: inline-block;
                        font-size: $f_size;
                        color: $f_color;
                    }
                }
              }
            }

        }
    }
    .down{
      position: absolute;
      display: block;
      right:0.08rem;
      top:45%;
      z-index: 100;
      border-top:.1rem solid $f_color;
      border-right:.1rem solid transparent;
      border-left:.1rem solid transparent;
      border-bottom:.1rem solid transparent;
    }
}
</style>
